import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_axrjc/datasource/network/bean/EventBean.dart';
import 'package:flutter_axrjc/datasource/network/bean/SelectOption.dart';
import 'package:flutter_axrjc/main.dart';
import 'package:flutter_axrjc/util/Util.dart';
import 'package:flutter_axrjc/widget/custom_selection.dart';
import 'package:flutter_axrjc/widget/custom_text_field.dart';
import 'package:flutter_axrjc/widget/dialog.dart';
import 'package:flutter_axrjc/widget/single_select_dialog/view.dart';
import 'package:get/get.dart';

import 'logic.dart';

class EditLightPage extends StatelessWidget {
  const EditLightPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<EditLightLogic>();
    final state = Get.find<EditLightLogic>().state;

    return Scaffold(
      backgroundColor: const Color(0xffF3F6F9),
      appBar: AppBar(
        centerTitle: true,
        title: const Text("修改灯具"),
        actions: [TextButton(onPressed: logic.change, child: const Text("修改"))],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Obx(() {
                return GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: state.imgList.length,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      crossAxisSpacing: 5,
                      mainAxisSpacing: 5,
                      childAspectRatio: 1),
                  itemBuilder: (BuildContext context, int index) {
                    var bean = state.imgList[index];
                    if (bean.pathOrUrl == "add") {
                      return GestureDetector(
                        onTap: logic.addImg,
                        child: Container(
                          decoration: BoxDecoration(
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(
                                    color: Colors.grey.withAlpha(20),
                                    blurRadius: 5)
                              ],
                              borderRadius: BorderRadius.circular(5)),
                          child: const Icon(
                            Icons.add,
                            color: Colors.grey,
                          ),
                        ),
                      );
                    } else {
                      return Stack(
                        children: [
                          InkWell(
                            onTap: () {
                              showPicPreview([bean.pathOrUrl]);
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.grey.withAlpha(20),
                                        blurRadius: 5)
                                  ],
                                  borderRadius: BorderRadius.circular(5),
                                  image: DecorationImage(
                                      image: bean.isLocal
                                          ? Image.file(File(bean.pathOrUrl))
                                              .image
                                          : Image.network(bean.pathOrUrl).image,
                                      fit: BoxFit.cover)),
                            ),
                          ),
                          Positioned(
                              top: 0,
                              right: 0,
                              child: GestureDetector(
                                onTap: () async {
                                  if (bean.isLocal) {
                                    state.localImageList.remove(bean.pathOrUrl);
                                  } else {
                                    await logic.delete(bean);
                                    state.uploadedImgs.removeWhere((element) =>
                                        element.filePath == bean.pathOrUrl);
                                    eventBus.fire(EventBean(
                                        type: EventType.refreshLightImge,
                                        data: null));
                                  }
                                  logic.refreshImg();
                                },
                                child: const Padding(
                                  padding: EdgeInsets.all(8.0),
                                  child: Icon(
                                    Icons.close,
                                    color: Colors.white,
                                  ),
                                ),
                              ))
                        ],
                      );
                    }
                  },
                );
              }),
              const SizedBox(
                height: 10,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text("灯具名称"),
                    const SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: Obx(() {
                        return CustomTextField(
                          style: const TextStyle(fontSize: 14),
                          textAlign: TextAlign.end,
                          value: state.fixtureName.value,
                          onChanged: (t) {
                            state.fixtureName.value = t;
                          },
                          inputDecoration: const InputDecoration(
                              hintText: "灯具名称",
                              hintStyle:
                                  TextStyle(fontSize: 14, color: Colors.grey),
                              isCollapsed: true,
                              isDense: true,
                              border: InputBorder.none),
                        );
                      }),
                    ),
                    const Icon(
                      Icons.keyboard_arrow_right_sharp,
                      color: Colors.grey,
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text("亮度"),
                    const SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: Obx(() {
                        return CustomTextField(
                          style: const TextStyle(fontSize: 14),
                          textAlign: TextAlign.end,
                          value: state.lux.value,
                          onChanged: (t) {
                            state.lux.value = t;
                          },
                          inputDecoration: const InputDecoration(
                              hintText: "亮度",
                              hintStyle:
                                  TextStyle(fontSize: 14, color: Colors.grey),
                              isCollapsed: true,
                              isDense: true,
                              border: InputBorder.none),
                        );
                      }),
                    ),
                    const Icon(
                      Icons.keyboard_arrow_right_sharp,
                      color: Colors.grey,
                    )
                  ],
                ),
              ),
              // Padding(
              //   padding: const EdgeInsets.symmetric(vertical: 10),
              //   child: Row(
              //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
              //     children: [
              //       const Text("色温"),
              //       const SizedBox(
              //         width: 10,
              //       ),
              //       Expanded(
              //         child: Obx(() {
              //           return CustomTextField(
              //             style: const TextStyle(fontSize: 14),
              //             textAlign: TextAlign.end,
              //             value: state.colorTemperatureAdjustment.value,
              //             onChanged: (t) {
              //               state.colorTemperatureAdjustment.value = t;
              //             },
              //             inputDecoration: const InputDecoration(
              //                 hintText: "色温",
              //                 hintStyle:
              //                     TextStyle(fontSize: 14, color: Colors.grey),
              //                 isCollapsed: true,
              //                 isDense: true,
              //                 border: InputBorder.none),
              //           );
              //         }),
              //       ),
              //       const Icon(
              //         Icons.keyboard_arrow_right_sharp,
              //         color: Colors.grey,
              //       )
              //     ],
              //   ),
              // ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text("灯具品牌"),
                    const SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: Obx(() {
                        return CustomTextField(
                          style: const TextStyle(fontSize: 14),
                          textAlign: TextAlign.end,
                          value: state.fixtureBrand.value,
                          onChanged: (t) {
                            state.fixtureBrand.value = t;
                          },
                          inputDecoration: const InputDecoration(
                              hintText: "灯具品牌",
                              hintStyle:
                                  TextStyle(fontSize: 14, color: Colors.grey),
                              isCollapsed: true,
                              isDense: true,
                              border: InputBorder.none),
                        );
                      }),
                    ),
                    const Icon(
                      Icons.keyboard_arrow_right_sharp,
                      color: Colors.grey,
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text("灯具型号"),
                    const SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: Obx(() {
                        return CustomTextField(
                          style: const TextStyle(fontSize: 14),
                          textAlign: TextAlign.end,
                          value: state.fixtureModel.value,
                          onChanged: (t) {
                            state.fixtureModel.value = t;
                          },
                          inputDecoration: const InputDecoration(
                              hintText: "灯具型号",
                              hintStyle:
                                  TextStyle(fontSize: 14, color: Colors.grey),
                              isCollapsed: true,
                              isDense: true,
                              border: InputBorder.none),
                        );
                      }),
                    ),
                    const Icon(
                      Icons.keyboard_arrow_right_sharp,
                      color: Colors.grey,
                    )
                  ],
                ),
              ),
              Obx(() {
                return CustomSelection(
                  "灯具类型",
                  value: state.fixtureTypeName.value,
                  onPressed: () async {
                    SelectOption? res = await showSelectionDialog(state.types);
                    state.fixtureType.value = res?.value ?? '';
                    state.fixtureTypeName.value = res?.label ?? '';
                  },
                );
              }),
              Obx(() {
                return CustomSelection(
                  "购买日期",
                  value: state.installDate.value,
                  onPressed: () {
                    showCustomDatePicker(onConfirm: (time, s) {
                      state.installDate.value = Util.date2String(time) ?? '';
                    });
                  },
                );
              }),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text("备注"),
                    const SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: Obx(() {
                        return CustomTextField(
                          style: const TextStyle(fontSize: 14),
                          value: state.remark.value,
                          maxLines: 5,
                          onChanged: (t) {
                            state.remark.value = t;
                          },
                          inputDecoration: const InputDecoration(
                              hintText: "请输入备注信息",
                              hintStyle:
                                  TextStyle(fontSize: 14, color: Colors.grey),
                              isCollapsed: true,
                              isDense: true,
                              contentPadding: EdgeInsets.all(10),
                              border: InputBorder.none),
                        );
                      }),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
